<template>
  <div class="top-bar">
    <i class="iconfont icon-shangyiyeqianyiye" @click="goBack"></i>
    <h2 class="scoped">国内</h2>
  </div>
  <van-search placeholder="请输入搜索关键词" />
  <div class="main">
    <div class="vist">
      <p class="vist-title">定位/最近访问</p>
      <van-button type="default"
        ><i class="iconfont icon-xiazai19"></i>{{ city }}</van-button
      >
      <van-button type="default">重庆</van-button>
      <van-button type="default">南京</van-button>
    </div>
    <div class="hotcities">
      <p class="vist-title">热门城市</p>
      <van-button type="default" v-for="city in hotCities" :key="city.id">{{
        city.name
      }}</van-button>
    </div>
    <div class="city-list">
     
      <p v-for="(item, index) in cities" :key="index">
        {{ index }}
        <p v-for="city in item" :key="city.id">{{ city.name }}</p> 
      </p>
      
    </div>
  </div>
</template>

<script setup>

import {  toRefs   } from 'vue'
import { useCityStore } from '../../stores/city'
const { city ,cities,hotCities} = toRefs(useCityStore())
import { useRouter } from 'vue-router'
const $router = useRouter()
function goBack(){
$router.back()
}
</script>
<style scoped>
@import url('https://at.alicdn.com/t/c/font_4027375_22id101ujlf.css');
.top-bar {
  display: flex;
  align-items: center;
}
.scoped {
  flex: 1;
  text-align: center;
}
.top-bar i {
  font-size: 35px;
}
</style>

